<!--
 * @Descripttion: 
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-30 15:22:53
 * @LastEditors: 淏
 * @LastEditTime: 2024-04-30 17:04:49
-->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i style="color: #00ffff" class="el-icon-document"></i>
          <span style="color: #00ffff">碰撞结果数据</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="container">
        <div class="handle-box">
          <div style="display: inline-flex">
            <selectImport
              style="width: 14vw"
              :type="importType"
              :importId="chooseImport.id"
              @getImport="getImport"
              @getDefaultValue="getDefaultValue"
            ></selectImport>
          </div>
          <el-button
            size="mini"
            type="primary"
            class="button"
            icon="el-icon-search"
            style="margin-left: 10px"
            plain
            @click="dialogVisible = true"
            v-waves
          >
            模糊查询
          </el-button>
          <exportExcel
            :fuzzyRules="fuzzyRules"
            :importId="chooseImport.id"
            :importName="chooseImport.name"
            style="margin-left: 80vw"
          ></exportExcel>
        </div>
        <!-- 虚拟表格-->
        <div v-if="tableData.length > 0">
          <virtuallyTable
            :tableData="tableData"
            :columns="columns"
            :handleBts="handleBts"
            @getTableBtn="getTableBtn"
          ></virtuallyTable>
        </div>
        <transition name="slide-left">
          <div v-if="tableData.length == 0" style="text-align: center">
            <el-image
              style="width: 300px; height: 300px"
              :src="require('@/assets/img/null.png')"
            ></el-image>
            <br />
            <span class="text">暂无数据，请选择数据集</span>
          </div>
        </transition>
      </div>
    </div>
    <!-- 编辑dialog -->
    <el-dialog
      :visible.sync="dialogVisibleUp"
      :before-close="dialogCloseUp"
      destroy-on-close
      width="50%"
    >
      <div slot="title" class="dialog-footer">
        <span class="text">编辑数据</span>
      </div>
      <el-form style="margin-top: 16px">
        <el-row>
          <div v-for="(item, index) in columns" :key="index">
            <el-col :span="8">
              <el-form-item label-width="150px">
                <span slot="label">
                  <span class="text">{{ item.columnCnName }}</span>
                </span>
                <el-input
                  size="mini"
                  v-model="chooseData[item.columnEnName]"
                ></el-input>
              </el-form-item>
            </el-col>
          </div>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          class="button"
          plain
          @click="dialogVisibleUp = false"
        >
          取 消
        </el-button>
        <el-button
          size="mini"
          class="button"
          type="primary"
          plain
          @click="handleDialogUp"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 模糊查询规则 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="dialogClose"
      destroy-on-close
      width="55%"
    >
      <div slot="title" class="dialog-footer">
        <span class="text">模糊查询</span>
      </div>
      <el-form :model="fuzzyRules">
        <div v-for="(fuzzyItem, fuzzyIndex) in fuzzyRules" :key="fuzzyIndex">
          <el-row>
            <!-- 选择列 -->
            <div>
              <el-form-item label-width="40px">
                <span slot="label">
                  <span class="text">列名</span>
                </span>
                <el-select
                  size="mini"
                  v-model="fuzzyItem.columnEnName"
                  placeholder="选择列"
                  class="handle-select mr10"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="(item, index) in columns"
                    :key="index"
                    :label="item.columnCnName"
                    :value="item.columnEnName"
                  ></el-option>
                </el-select>
                <el-tooltip class="item" content="添加列" placement="top-end">
                  <el-button
                    size="mini"
                    class="button"
                    style="margin-left: 20px"
                    type="success"
                    icon="el-icon-circle-plus-outline"
                    circle
                    plain
                    @click="addColumn(fuzzyItem)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="button"
                  content="删除该列"
                  placement="top-start"
                >
                  <el-button
                    size="mini"
                    style="margin-left: 20px"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    plain
                    @click="removeColumn(fuzzyItem)"
                  ></el-button>
                </el-tooltip>
              </el-form-item>
            </div>
            <div
              v-for="(rulesItem, rulesIndex) in fuzzyItem.rule"
              :key="rulesIndex"
            >
              <el-row>
                <el-col :span="0.2">
                  <el-tooltip
                    class="button"
                    content="删除该条件"
                    placement="left-start"
                  >
                    <el-button
                      size="mini"
                      style="margin-left: 10px"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      plain
                      @click="removeRules(rulesItem, fuzzyIndex)"
                    ></el-button>
                  </el-tooltip>
                </el-col>
                <el-col :span="23.8">
                  <selectAllRule
                    @getAllRule="getAllRule($event, fuzzyIndex, rulesIndex)"
                    :type="ruleType"
                    :columns="columns"
                    @getValue1="getValue1($event, fuzzyIndex, rulesIndex)"
                    @getValue2="getValue2($event, fuzzyIndex, rulesIndex)"
                  ></selectAllRule>
                </el-col>
              </el-row>
            </div>
            <el-col :span="24">
              <el-tooltip
                class="button"
                content="添加查询条件"
                placement="left-start"
              >
                <el-button
                  size="mini"
                  style="margin-left: 10px"
                  type="success"
                  icon="el-icon-circle-plus-outline"
                  plain
                  @click="addRules(fuzzyIndex)"
                >
                  添加条件
                </el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          class="button"
          plain
          @click="dialogVisible = false"
        >
          取 消
        </el-button>
        <el-button
          size="mini"
          class="button"
          type="primary"
          plain
          @click="handleDialog"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import exportExcel from '@/components/excel/exportExcel.vue'
  import selectImport from '@/components/public/selectImport.vue'
  import virtuallyTable from '@/components/public/virtuallyTable.vue'
  import selectAllRule from '@/components/select/selectAllRule.vue'
  import {
    fuzzyQuery_import,
    delete_ImportData,
    update_ImportData,
  } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'resultData',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {
      exportExcel,
      selectImport,
      virtuallyTable,
      selectAllRule,
    },
    // 组件状态值
    data() {
      return {
        ruleType: 'query', //查询：query、清洗：clean、碰撞：collision
        importType: 'collision',
        chooseImport: {
          createTime: '',
          id: '',
          name: '',
          type: '',
        },
        chooseData: '',
        tableData: [],
        columns: [],
        fuzzyRules: [
          {
            columnEnName: '',
            rule: [
              {
                ruleName: '',
                value1: '',
                isV1Filed: '',
                value2: '',
                isV2Filed: '',
                valueCount: '',
              },
            ],
          },
        ],
        handleBts: [
          {
            btType: 'warning',
            btName: '修改',
            funName: 'update',
          },
          {
            btType: 'danger',
            btName: '删除',
            funName: 'delete',
          },
        ],
        dialogVisible: false,
        dialogVisibleUp: false,
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      handleSearch() {
        this.getData()
      },
      getData() {
        let importId = this.chooseImport.id
        let fuzzyRules = JSON.stringify(this.fuzzyRules)
        var qs = require('qs')
        var data = qs.stringify({
          importId: importId,
          fuzzyRules: fuzzyRules,
        })
        this.$loading.show()
        fuzzyQuery_import(data)
          .then((res) => {
            this.$loading.close()
            this.columns = res.data.tableColumn
            if (res.data.importData && res.data.importData != null) {
              this.tableData = res.data.importData
            } else {
              this.tableData = []
            }
          })
          .catch((err) => {
            this.$loading.close()
          })
      },
      handleDialogUp() {
        this.updateImportData()
      },
      updateImportData() {
        let importId = this.chooseImport.id
        let id = this.chooseData.id
        let row = JSON.stringify(this.chooseData)
        var qs = require('qs')
        var data = qs.stringify({
          importId: importId,
          id: id,
          importData: row,
        })
        update_ImportData(data).then((res) => {
          console.log(res)
          this.$message({
            type: 'success',
            message: res.message,
          })
        })
      },
      /**
       * @description 组件方法
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      //数据集选择后触发
      getImport(row) {
        if (row != undefined) {
          this.chooseImport = row
          this.handleSearch()
        }
      },
      getDefaultValue(row) {
        this.chooseImport = row
        this.handleSearch()
      },
      //表格按钮点击后触发   update修改、delete删除
      getTableBtn(type, row) {
        this.chooseData = row
        switch (type) {
          case 'update':
            this.chooseData = row
            this.dialogVisibleUp = true
            break
          case 'delete':
            this.deleteData()
            break
        }
      },
      deleteData() {
        let importId = this.chooseImport.id
        let id = this.chooseData.id
        var qs = require('qs')
        var data = qs.stringify({
          importId: importId,
          id: id,
        })
        delete_ImportData(data).then((res) => {
          this.$message({
            type: 'success',
            message: res.message,
          })
          this.handleSearch()
        })
      },
      dialogCloseUp(done) {
        this.$confirm('确认关闭？')
          .then((_) => {
            done()
            this.clearDialogUp()
          })
          .catch((_) => {})
      },
      clearDialogUp() {
        this.chooseData = ''
      },
      /**
       * @description 模糊查询表格
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      getAllRule(row, fuzzyIndex, rulesIndex) {
        this.fuzzyRules[fuzzyIndex].rule[rulesIndex].ruleName = row.name
        this.fuzzyRules[fuzzyIndex].rule[rulesIndex].valueCount = row.valueCount
      },
      getValue1(row, fuzzyIndex, rulesIndex) {
        console.log(row)
        this.fuzzyRules[fuzzyIndex].rule[rulesIndex].value1 = row.value1
        this.fuzzyRules[fuzzyIndex].rule[rulesIndex].isV1Filed = row.isV1Filed
      },
      getValue2(row, fuzzyIndex, rulesIndex) {
        console.log(row)
        this.fuzzyRules[fuzzyIndex].rule[rulesIndex].value2 = row.value2
        this.fuzzyRules[fuzzyIndex].rule[rulesIndex].isV2Filed = row.isV2Filed
      },
      //新增列
      addColumn() {
        this.fuzzyRules.push({
          columnEnName: '',
          rule: [
            {
              ruleName: '',
              value1: '',
              isV1Filed: '',
              value2: '',
              isV2Filed: '',
              valueCount: '',
            },
          ],
        })
      },
      //删除列
      removeColumn(item) {
        var index = this.fuzzyRules.indexOf(item)
        if (this.fuzzyRules.length != 1) {
          if (index !== -1) {
            this.fuzzyRules.splice(index, 1)
          }
        }
      },
      //新增条件
      addRules(fuzzyIndex) {
        this.fuzzyRules[fuzzyIndex].rule.push({
          ruleName: '',
          value1: '',
          isV1Filed: '',
          value2: '',
          isV2Filed: '',
          valueCount: '',
        })
      },
      //删除条件
      removeRules(item, fuzzyIndex) {
        var index = this.fuzzyRules[fuzzyIndex].rule.indexOf(item)
        if (this.fuzzyRules[fuzzyIndex].rule.length != 1) {
          if (index !== -1) {
            this.fuzzyRules[fuzzyIndex].rule.splice(index, 1)
          }
        }
      },
      handleDialog() {
        this.handleSearch()
        this.clearDialog()
      },
      dialogClose(done) {
        this.$confirm('确认关闭？')
          .then((_) => {
            done()
            this.clearDialog()
          })
          .catch((_) => {})
      },
      clearDialog() {
        this.dialogVisible = false
        this.fuzzyRules = [
          {
            columnEnName: '',
            rule: [
              {
                ruleName: '',
                value1: '',
                isV1Filed: '',
                value2: '',
                isV2Filed: '',
                valueCount: '',
              },
            ],
          },
        ]
      },
    },
    created() {
      if (this.$route.query.chooseImport) {
        this.chooseImport = this.$route.query.chooseImport.importData
        this.getData()
      } else {
        this.chooseImport = {
          createTime: '',
          id: '',
          name: '',
          type: '',
        }
      }
    },
    mounted() {},
  }
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }
  .handle-select {
    width: 200px;
  }

  .handle-input {
    width: 200px;
    display: inline-block;
  }
  .mr10 {
    margin-right: 10px;
  }
  .button {
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position: absolute;
  }
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>
<style lang="less" scoped>
  /deep/.el-dialog {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.8);
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
  }
</style>
